<template>
  <div style="position: relative">
    <el-drawer
      v-model="props.cardDrawer"
      title="卡片链接"
      :before-close="handleCardVisibleClose"
      size="50%"
    >
    <el-button type="primary" @click="addList()" style="margin: 10px 0"
        >新增</el-button
      >
      <el-table :data="tableData" >
        <el-table-column prop="websiteModuleName" label="标题" />
        <el-table-column prop="image" label="图片" align="center">
          <template #default="scope">
            <ImagePreview :src="scope.row.host" height="50px"></ImagePreview>
          </template>
        </el-table-column>
        <el-table-column prop="url" label="链接" align="center" />
        <el-table-column label="操作" align="center">
          <template #default="scope">
            <el-button link type="primary" @click="cardEdit(scope.row)"
              >编辑</el-button
            >
            <el-button link type="danger" @click="cardDelete(scope.row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </el-drawer>
    <AddWebCard
      :listItem="publicItem"
      :brandVisible="brandVisible"
      :websiteId="props.websiteId"
      :moduleId="props.listItem.id"
      :languageId="props.languageId"
      @handleBrandVisibleClose="handleBrandVisibleClose"
      @handleBrandVisibleSure="handleBrandVisibleSure"
    ></AddWebCard>
  </div>
</template>
  <script setup>
import { ref, defineProps, defineEmits, onMounted, watch, reactive } from "vue";
import AddWebCard from "../components/AddWebCard.vue";
const emits = defineEmits(["handleCardVisibleClose"]);
const { proxy } = getCurrentInstance();
const publicItem = ref({}); //公共赋值对象参数
const brandVisible = ref(false);
const tableData = ref([]);

const props = defineProps({
  cardDrawer: {
    type: Boolean,
    default: false,
  },
  // 传值数据对象
  listItem: {
    type: Object,
    default: {},
  },
  websiteId: {
    type: String || Number,
    default: "",
  },
  languageId:{
    type: String || Number,
    default: "",
  }
});
const searchFrom = ref({
  pageNum: 1,
  pageSize: 999,
  param: {
    websiteId: Number(props.websiteId), //网站id
    moduleId: null, //模块id
    moduleType: "Card",
  },
});
watch(
  () => props.cardDrawer,
  () => {
    if (!props.cardDrawer) return;
    getList();
  }
);
const getList = () => {
  searchFrom.value.param.moduleId = props.listItem.id;
  site.moduleline
    .sitewebsitemodulelineList({
      data: searchFrom.value,
    })
    .then((res) => {
      if (res.data?.length) {
        res.data = res.data.map((item) => {
          return {
            ...item,
            newImage: item.host,
          };
        });
      }
      tableData.value = res.data;
    });
};
// 新增
const addList = () => {
  publicItem.value = {};
  brandVisible.value = true;
};
// 编辑
const cardEdit = (rowItem) => {
  publicItem.value = rowItem;
  brandVisible.value = true;
};
//   添加照片的列表的确定取消
const handleBrandVisibleClose = () => {
  brandVisible.value = false;
};
const handleBrandVisibleSure = (rowItem) => {
  brandVisible.value = false;
  getList();
};

//   确定取消
const handleCardVisibleClose = () => {
  emits("handleCardVisibleClose");
};
const cardDelete= (row) => {
  var newArray = [];
  newArray.push(row.id);
  proxy.$modal.confirm("是否确认删除此数据项？").then(() => {
    site.moduleline
      .sitewebsitemodulelineDeletebatch({
        data: {
          ids: newArray,
          moduleId: props.listItem.id,
        },
      })
      .then((res) => {
        if (res.code === 200) {
          getList();
          proxy.$message.success("删除成功");
        }
      });
  });
}
</script>
  <style lang="scss" scoped>
.full-width {
  width: 148px;
}
</style>